<template>
  <div class="payable-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <el-form inline @submit.native.prevent>
          <el-form-item>
            <el-select style="width:200px;margin-left: 10px;" v-model="selects.select" placeholder="请选择">
              <el-option
                v-for="(ite,ind) in selects.scene"
                :key="ind"
                :label="ite.name"
                :value="ite.name">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-table v-loading="listLoading" :data="list">
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        type="index"
        width="95"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="supplier_name"
        label="供应商"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="手机"
      />
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getSupplierTaxSettingLists } from '@/api/dc_billQuery'

export default {
  name: 'billQuery',

  data() {
    return {
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      queryForm: {
        page: 1,
        list_row: 10,
        type: '1'
      },
      totalMoney: 0,
      selects:{
        select:'本月',
        scene:[
          {
            name:'本月',
            id:1,
            type:'1'
          },
          {
            name:'下月',
            id:2,
            type:'2'
          }
        ]
      }
    }
  },

  created() {
    this.getList()
  },

  activated() {
    this.getList()
  },

  methods: {
    async getList() {
      this.listLoading = true
      const  data = await getSupplierTaxSettingLists(this.queryForm)
      console.log(11111,data)
      this.list = data
      this.total = data.length
      this.listLoading = false
    },
    handleSizeChange(val) {
      this.queryForm.list_row = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getList()
    },
    search() {
      console.log(1111111,this.selects.select)
      if(this.selects.scene && this.selects.scene.length>0){
        this.selects.scene.forEach(item=>{
          if(this.selects.select === item.name){
            this.queryForm.type = item.type;
            this.getList()
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .vab-query-form .left-panel {
  flex-wrap: nowrap;
}

.summary-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.summary-item:not(:last-child) {
  margin-right: 20px;
}

.summary-value {
  margin-right: 4px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.search-input {
  width: 260px;
}
</style>
